<template>
  <div class="shipPosition">
    <div id="shipPositionCount"></div>
  </div>
</template>
<script>
export default {
  name: "shipPosition",
  data() {
    return {};
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(
        document.getElementById("shipPositionCount")
      );
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#43ECF9", "#F1B549", "#6CFABC", "#F16252", "#F89654"],
        graphic: {
          elements: [
            {
              type: "text",
              left: "10%",
              top: "center",
              style: {
                text: "船位",
                fill: "#FFFFFF",
              },
            },
          ],
        },
        legend: {
          orient: "vertical",
          left: 230,
          y: "center",
          itemWidth: 3,
          itemHeight: 13,
          formatter: function (name) {
            const data = [
              { value: 45, name: "武汉市海事局" },
              { value: 10, name: "南京海事局" },
              { value: 25, name: "南通海事局" },
              { value: 15, name: "宜昌海事局" },
              { value: 5, name: "其他海事局" },
            ];
            let total = 0;
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            var arr = [
              "{a|" + name + "}",
              "{b|" + ((target / total) * 100).toFixed(0) + "%}",
            ];
            return arr.join("  ");
          },
          textStyle: {
            // padding: [8, 0, 0, 0],
            rich: {
              a: {
                fontSize: 12,
                color: "#FFFFFF",
              },
              b: {
                fontSize: 12,
                color: "#FFFFFF",
              },
            },
          },
        },
        series: [
          {
            name: "船位",
            type: "pie",
            radius: ["60%", "90%"],
            center: ["40%", "50%"],
            data: [
              { value: 45, name: "武汉市海事局" },
              { value: 10, name: "南京海事局" },
              { value: 25, name: "南通海事局" },
              { value: 15, name: "宜昌海事局" },
              { value: 5, name: "其他海事局" },
            ],
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
.shipPosition {
  width: 100%;
  height: calc((100% - 30px) / 2 - 8px);
  background: #0e2551;
  border-radius: 6px;
  margin-top: 16px;
  padding: 4px 0;
  box-sizing: border-box;
  #shipPositionCount {
    width: 100%;
    height: 100%;
  }
}
</style>
